<!DOCTYPE HTML>
<html lang="en" >
    
    <head>
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>词法作用域 | JavaScript高级讲义</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.6.7">
        
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="../gitbook/style.css">
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-highlight/website.css">
        
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-search/search.css">
        
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-fontsettings/website.css">
        
    
    

        
    
    
    <link rel="next" href="../Sources/变量名提升.html" />
    
    
    <link rel="prev" href="../Sources/递归.html" />
    

        
    </head>
    <body>
        
        
    <div class="book"
        data-level="1.2.1"
        data-chapter-title="词法作用域"
        data-filepath="Sources/词法作用域.md"
        data-basepath=".."
        data-revision="Mon Oct 24 2016 01:31:56 GMT+0800 (CST)"
        data-innerlanguage="">
    

<div class="book-summary">
    <nav role="navigation">
        <ul class="summary">
            
            
            
            

            

            
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../index.html">
                
                        <i class="fa fa-check"></i>
                        
                        Introduction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1" >
            
            <span><b>1.</b> JavaScript高级知识</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.1" data-path="Sources/递归.html">
            
                
                    <a href="../Sources/递归.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.1.</b>
                        
                        递归
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.2" >
            
            <span><b>1.2.</b> 词法作用域</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter active" data-level="1.2.1" data-path="Sources/词法作用域.html">
            
                
                    <a href="../Sources/词法作用域.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.2.1.</b>
                        
                        词法作用域
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="Sources/变量名提升.html">
            
                
                    <a href="../Sources/变量名提升.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.2.2.</b>
                        
                        变量名提升
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="Sources/作用域链.html">
            
                
                    <a href="../Sources/作用域链.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.2.3.</b>
                        
                        作用域链
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="Sources/闭包.html">
            
                
                    <a href="../Sources/闭包.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.3.</b>
                        
                        闭包
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="Sources/函数的四种调用模式.html">
            
                
                    <a href="../Sources/函数的四种调用模式.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.4.</b>
                        
                        函数的四种调用模式
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2" >
            
            <span><b>2.</b> 面向对象案例</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.1" >
            
            <span><b>2.1.</b> 歌曲列表管理</span>
            
            
        </li>
    
        <li class="chapter " data-level="2.2" >
            
            <span><b>2.2.</b> Tab栏切换</span>
            
            
        </li>
    

            </ul>
            
        </li>
    


            
            <li class="divider"></li>
            <li>
                <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                    Published with GitBook
                </a>
            </li>
            
        </ul>
    </nav>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header" role="navigation">
    <!-- Actions Left -->
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../" >JavaScript高级讲义</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1" role="main">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <h2 id="&#x4F5C;&#x7528;&#x57DF;">&#x4F5C;&#x7528;&#x57DF;</h2>
<p><strong>&#x57DF;</strong>&#xFF0C;&#x8868;&#x793A;&#x7684;&#x662F;&#x4E00;&#x4E2A;&#x8303;&#x56F4;&#xFF0C;<strong>&#x4F5C;&#x7528;&#x57DF;</strong>&#xFF0C;&#x5C31;&#x662F;&#x4F5C;&#x7528;&#x8303;&#x56F4;&#x3002;</p>
<p>&#x4F5C;&#x7528;&#x57DF;&#x8BF4;&#x660E;&#x7684;&#x662F;&#x4E00;&#x4E2A;&#x53D8;&#x91CF;&#x53EF;&#x4EE5;&#x5728;&#x4EC0;&#x4E48;&#x5730;&#x65B9;&#x88AB;&#x4F7F;&#x7528;&#xFF0C;&#x4EC0;&#x4E48;&#x5730;&#x65B9;&#x4E0D;&#x80FD;&#x88AB;&#x4F7F;&#x7528;&#x3002;</p>
<h3 id="&#x5757;&#x7EA7;&#x4F5C;&#x7528;&#x57DF;">&#x5757;&#x7EA7;&#x4F5C;&#x7528;&#x57DF;</h3>
<font color="red">JavaScript&#x4E2D;&#x6CA1;&#x6709;&#x5757;&#x7EA7;&#x4F5C;&#x7528;&#x57DF;</font>

<pre><code class="lang-js">{
    <span class="hljs-keyword">var</span> num = <span class="hljs-number">123</span>;
    {
        <span class="hljs-built_in">console</span>.log( num );
    }
}
<span class="hljs-built_in">console</span>.log( num );
</code></pre>
<p>&#x4E0A;&#x9762;&#x8FD9;&#x6BB5;&#x4EE3;&#x7801;&#x5728;JavaScript&#x4E2D;&#x662F;&#x4E0D;&#x4F1A;&#x62A5;&#x9519;&#x7684;&#xFF0C;&#x4F46;&#x662F;&#x5728;&#x5176;&#x4ED6;&#x7684;&#x7F16;&#x7A0B;&#x8BED;&#x8A00;&#x4E2D;&#xFF08;C#&#x3001;C&#x3001;JAVA&#xFF09;&#x4F1A;&#x62A5;&#x9519;&#x3002;</p>
<p>&#x8FD9;&#x662F;&#x56E0;&#x4E3A;&#xFF0C;&#x5728;JavaScript&#x4E2D;&#x6CA1;&#x6709;&#x5757;&#x7EA7;&#x4F5C;&#x7528;&#x57DF;&#xFF0C;&#x4F7F;&#x7528;<code>{}</code>&#x6807;&#x8BB0;&#x51FA;&#x6765;&#x7684;&#x4EE3;&#x7801;&#x5757;&#x4E2D;&#x58F0;&#x660E;&#x7684;&#x53D8;&#x91CF;<code>num</code>&#xFF0C;&#x662F;&#x53EF;&#x4EE5;&#x88AB;<code>{}</code>&#x5916;&#x9762;&#x8BBF;&#x95EE;&#x5230;&#x7684;&#x3002;</p>
<p>&#x4F46;&#x662F;&#x5728;&#x5176;&#x4ED6;&#x7684;&#x7F16;&#x7A0B;&#x8BED;&#x8A00;&#x4E2D;&#xFF0C;&#x6709;&#x5757;&#x7EA7;&#x4F5C;&#x7528;&#x57DF;&#xFF0C;&#x90A3;&#x4E48;<code>{}</code>&#x4E2D;&#x58F0;&#x660E;&#x7684;&#x53D8;&#x91CF;<code>num</code>&#xFF0C;&#x662F;&#x4E0D;&#x80FD;&#x5728;&#x4EE3;&#x7801;&#x5757;&#x5916;&#x90E8;&#x8BBF;&#x95EE;&#x7684;&#xFF0C;&#x6240;&#x4EE5;&#x62A5;&#x9519;&#x3002;</p>
<h3 id="&#x8BCD;&#x6CD5;&#x4F5C;&#x7528;&#x57DF;">&#x8BCD;&#x6CD5;&#x4F5C;&#x7528;&#x57DF;</h3>
<p><strong>&#x4EC0;&#x4E48;&#x662F;&#x8BCD;&#x6CD5;&#x4F5C;&#x7528;&#x57DF;&#xFF1F;</strong></p>
<p>&#x8BCD;&#x6CD5;( &#x4EE3;&#x7801; )&#x4F5C;&#x7528;&#x57DF;, &#x5C31;&#x662F;&#x4EE3;&#x7801;&#x5728;&#x7F16;&#x5199;&#x8FC7;&#x7A0B;&#x4E2D;&#x4F53;&#x73B0;&#x51FA;&#x6765;&#x7684;&#x4F5C;&#x7528;&#x8303;&#x56F4;. &#x4EE3;&#x7801;&#x4E00;&#x65E6;&#x5199;&#x597D;, &#x4E0D;&#x7528;&#x6267;&#x884C;, &#x4F5C;&#x7528;&#x8303;&#x56F4;&#x5C31;&#x5DF2;&#x7ECF;&#x786E;&#x5B9A;&#x597D;&#x4E86;. &#x8FD9;&#x4E2A;&#x5C31;&#x662F;&#x6240;&#x8C13;&#x8BCD;&#x6CD5;&#x4F5C;&#x7528;&#x57DF;.</p>
<p><strong>&#x5728; js &#x4E2D;&#x8BCD;&#x6CD5;&#x4F5C;&#x7528;&#x57DF;&#x89C4;&#x5219;:</strong></p>
<ul>
<li><p>&#x51FD;&#x6570;&#x5141;&#x8BB8;&#x8BBF;&#x95EE;&#x51FD;&#x6570;&#x5916;&#x7684;&#x6570;&#x636E;.</p>
</li>
<li><p>&#x6574;&#x4E2A;&#x4EE3;&#x7801;&#x7ED3;&#x6784;&#x4E2D;&#x53EA;&#x6709;&#x51FD;&#x6570;&#x53EF;&#x4EE5;&#x9650;&#x5B9A;&#x4F5C;&#x7528;&#x57DF;.</p>
</li>
<li><p>&#x4F5C;&#x7528;&#x57DF;&#x89C4;&#x5219;&#x9996;&#x5148;&#x4F7F;&#x7528;&#x63D0;&#x5347;&#x89C4;&#x5219;&#x5206;&#x6790;</p>
</li>
<li><p>&#x5982;&#x679C;&#x5F53;&#x524D;&#x4F5C;&#x7528;&#x89C4;&#x5219;&#x4E2D;&#x6709;&#x540D;&#x5B57;&#x4E86;, &#x5C31;&#x4E0D;&#x8003;&#x8651;&#x5916;&#x9762;&#x7684;&#x540D;&#x5B57;</p>
</li>
</ul>
<h4 id="&#x4F8B;&#x5B50;1&#xFF1A;">&#x4F8B;&#x5B50;1&#xFF1A;</h4>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> num = <span class="hljs-number">123</span>;

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span>(<span class="hljs-params"></span>) </span>{

    <span class="hljs-built_in">console</span>.log( num );

}

foo();
</code></pre>
<h4 id="&#x4F8B;&#x5B50;2&#xFF1A;">&#x4F8B;&#x5B50;2&#xFF1A;</h4>
<pre><code class="lang-js"><span class="hljs-keyword">if</span> ( <span class="hljs-literal">false</span> ) {
    <span class="hljs-keyword">var</span> num = <span class="hljs-number">123</span>;
}
<span class="hljs-built_in">console</span>.log( num ); <span class="hljs-comment">// undefiend</span>
</code></pre>
<h4 id="&#x4F8B;&#x5B50;3&#xFF1A;">&#x4F8B;&#x5B50;3&#xFF1A;</h4>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> num = <span class="hljs-number">123</span>;
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">var</span> num = <span class="hljs-number">456</span>;
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">func</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-built_in">console</span>.log( num );
    }

    func();
}

foo();
</code></pre>
<h4 id="&#x7EC3;&#x4E60;&#xFF1A;">&#x7EC3;&#x4E60;&#xFF1A;</h4>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> num1 = <span class="hljs-number">123</span>;
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo1</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">var</span> num1 = <span class="hljs-number">456</span>;
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo2</span>(<span class="hljs-params"></span>) </span>{
        num1 = <span class="hljs-number">789</span>;
        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo3</span> (<span class="hljs-params"></span>) </span>{
            <span class="hljs-built_in">console</span>.log( num1 );
        }
        foo3();
    }
    foo2();
}
foo1();
<span class="hljs-built_in">console</span>.log( num1 );
</code></pre>
<h4 id="&#x9762;&#x8BD5;&#x9898;">&#x9762;&#x8BD5;&#x9898;</h4>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> num = <span class="hljs-number">123</span>;
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">func1</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-built_in">console</span>.log(num);
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">func2</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-keyword">var</span> num = <span class="hljs-number">456</span>;
    func1();
}
</code></pre>

                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../Sources/递归.html" class="navigation navigation-prev " aria-label="Previous page: 递归"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../Sources/变量名提升.html" class="navigation navigation-next " aria-label="Next page: 变量名提升"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../gitbook/app.js"></script>

    
    <script src="../gitbook/plugins/gitbook-plugin-search/lunr.min.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-search/search.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-sharing/buttons.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-fontsettings/buttons.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"highlight":{},"search":{"maxIndexSize":1000000},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
